<template>
    <div class="doctorreviewlist">
        <Row>
            <Col :xs="24">
            <div class="margin-up-down">
                 <fourLevelLinkage
                    @changeProvince="changeProvince"
                    @changeCity="changeCity"
                    @changeArea="changeArea"
                    @changeHospital="changeHospital"
                    :province="province"
                    :city="city"
                    :area="area"
                    :hospital="hospital"
                    :isBack="isBack"
                ></fourLevelLinkage>
            </div>
            <div class="margin-up-down">
                <Input class="w-input" v-model="searchKey" placeholder="输入医生科室或职称关键字"/>&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div class="margin-up-down">
                <Button type="primary" @click="loadPage(1)">
                    <Icon type="ios-search" size="14" style="margin-right:5px"/>
                </Button>
            </div>
            </Col>
        </Row>
        <Table class="m-table" stripe :columns="columns" :data="doctorList"></Table>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
        <Modal
            v-if="mmInfo!=null"
            title = "信息关联"
            :mask-closable="false"
            v-model="modalStatus"
            width="600"
            :footer-hide="true"
            :closable="false"
        >
            <div class = 'main'>
                <p class="title">平台注册医生信息与院内系统对照关联</p>
                <div class="box">
                    <p class="m-row c-tt">互联网平台信息</p>
                    <p class="m-row m-text">
                        <span>医生姓名:</span>
                        <span>{{mmInfo.name}}</span>
                    </p>
                    <p class="m-row m-text">
                        <span>所属医院:</span>
                        <span>{{mmInfo.hospitalname}}</span>
                    </p>
                    <p class="m-row m-text">
                        <span>所属科室:</span>
                        <span>{{mmInfo.deptName}}</span>
                    </p>
                    <p class="m-row m-text">
                        <span>医师职称:</span>
                        <span>{{mmInfo.titleName}}</span>
                    </p>
                    <p class="m-row m-text">
                        <span>联系电话:</span>
                        <span>{{mmInfo.phone}}</span>
                    </p>
                    <p class="m-row m-text">
                        <span>院内编码:</span>
                        <span>
                            <Input v-model="mmInfo.hiscode" class="m-input" style="width:120px;" placeholder="院内编码"/>
                            <Button type="primary" @click="toSaveCode">
                                <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                            </Button>
                        </span>
                    </p>
                    <p class="m-row m-text">
                        <span style="margin-left:75px">
                            <Input v-model="docname" class="m-input" style="width:120px;" placeholder="输入医生名称检索"/>
                            <Button type="primary" icon="ios-search" @click="hLoadcode(1)">查询</Button>
                        </span>
                    </p>
                </div>
                <div v-if="hisbox == true">
                    <p class="m-row  c-tt">
                        <span>医院院内信息</span>
                    </p>
                    <!-- <p>
                        <span>
                            <Input v-model="hSearchKey" class="m-input ss" placeholder="医生姓名或院内编码"/>
                        </span>
                        <span>
                            <Button type="primary" icon="ios-search" @click="hLoadPage(1)">查询</Button>
                        </span>
                    </p> -->
                    <template v-if="hDetail">
                        <div class="box">
                            <p class="m-row m-text">
                                <span>医生姓名:</span>
                                <span>
                                    {{hDetailInfo.docname}}
                                    <i class="x-back" @click="hCloseDetail">X</i>
                                </span>
                            </p>
                            <p class="m-row m-text">
                                <span>所属医院:</span>
                                <span>{{hDetailInfo.orgName}}</span>
                            </p>
                            <p class="m-row m-text">
                                <span>所属科室:</span>
                                <span>{{hDetailInfo.depName}}</span>
                            </p>
                            <p class="m-row m-text">
                                <span>医师职称:</span>
                                <span>{{hDetailInfo.titlename}}</span>
                            </p>
                            <p class="m-row m-text">
                                <span>联系电话:</span>
                                <span>{{hDetailInfo.phone}}</span>
                            </p>
                            <p class="m-row m-text">
                                <span>院内编码:</span>
                                <span>{{hDetailInfo.doccode}}</span>
                            </p>
                        </div>
                    </template>
                    <template v-if="!hDetail">
                        <Table size="small" stripe :columns="hColumns" :data="hList" class="hisbox"></Table>
                        <Page size="small" :total="hCount" :current='hPageNo' show-total show-elevator :page-size="hPageSize" @on-change="hLoadPage" class="page"/>
                    </template>
                </div>
            </div>
            <footer class="slot-ft">
                <!-- <Button type="primary" @click="toSaveCode" class="m-btn-l">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button> -->
                <Button type="default" @click="closeModal" class="m-btn-r">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>关闭
                </Button>
            </footer>
        </Modal>
    </div>
</template>
<script>
import { Switch } from "view-design";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import api from "@/api/commonApi";
import cookie from "@/utils/cookie.js";
export default {
    data() {
        return {
            modalStatus: false,
            mmInfo: null,
            mId: null,
            mIndex: null,
            hDetailInfo: null,
            hDetail: false,
            hColumns: [
                {
                    title: "医生姓名",
                    key: "docname",
                    align: "center",
                    // width: 100,
                    render: (h, params) => {
                        let doctorName = params.row.docname,
                            _index = params.row._index;
                        return h(
                            "span",
                            {
                                style: {
                                    cursor: "pointer"
                                },
                                on: {
                                    click: () => {
                                        this.hShowDetail(params.row);
                                    }
                                }
                            },
                            doctorName
                        );
                    }
                },
                // {
                //     title: "所属医院",
                //     key: "hospitalname",
                //     align: "center",
                //     // width: 230
                // },
                {
                    title: "院内编码",
                    key: "doccode",
                    align: "center",
                    // width: 150
                }
            ],
            hList: [],
            hCount: 0,
            hPageSize: 4,
            hPageNo: 1,
            hSearchKey: null,

            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 1,

            searchKey: "",
            columns: [
                { title: "排序", key: "iNum", align: "center", width: 60,
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                {
                    title: "机构",
                    key: "hospitalName",
                    align: "center",
                    width: 220
                },
                { title: "科室", key: "deptName", align: "center", },
                { title: "职称", key: "titleName", align: "center", },
                {
                    title: "姓名",
                    key: "doctorName",
                    align: "center",
                },
                {
                    title: "电话",
                    key: "phone",
                    align: "center",
                    render: (h, params) => {
            if(params.row.phone){
              let phone = params.row.phone.replace(/^(.{3})(?:\w+)(.{4})$/, "\$1****\$2") ;
              return phone
            }
            }
                },
                {
                    title: "院内编码",
                    key: "hiscode",
                    align: "center",
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width: 180,
                    render: (h, params) => {
                        let id = params.row.doctorId,
                            _index = params.row._index;
                        let hospitalId = params.row.hospitalid;
                        return [
                            h(
                                "a",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            //   公用方法
                                            this.functionJS.queryNavgationTo(
                                                this,
                                                "/index/configuration/dovtormanage/edit",
                                                {
                                                    id,
                                                    pageNo: this.pageNo,
                                                    searchKey: this.searchKey,
                                                    province: this.province,
                                                    city: this.city,
                                                    area: this.area,
                                                    hospital: hospitalId,
                                                    isBack: 2
                                                }
                                            );
                                        }
                                    }
                                },
                                "管理服务"
                            ),
                            " | ",
                            h(
                                "a",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            this.showModal(id, _index);
                                        }
                                    }
                                },
                                "信息关联"
                            )
                        ];
                    }
                }
            ],
            doctorList: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            hospitalId: '',
            hisbox: false,
            docname: '',
        };
    },
    components: {
        fourLevelLinkage,
        "i-switch": Switch
    },
    created() {
        this.province = this.$route.query.province
            ? parseInt(this.$route.query.province)
            : null;
        this.city = this.$route.query.city
            ? parseInt(this.$route.query.city)
            : null;
        this.area = this.$route.query.area
            ? parseInt(this.$route.query.area)
            : null;
        this.hospital = this.$route.query.hospital
            ? this.$route.query.hospital
            : null;
        this.isBack = this.$route.query.isBack
            ? parseInt(this.$route.query.isBack)
            : 1;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/doctorManagement/index",
                title: "医生端运营"
            },
            {
                path: "/index/configuration/doctormanage/list",
                title: "医生菜单管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        //上来就加载第一页数据
        this.loadPage(pageNo);
    },
    methods: {
        hShowDetail(_index) {
            this.hDetailInfo = _index;
            console.log(this.hDetailInfo)
            this.hDetail = true;
        },
        hCloseDetail() {
            this.hDetail = false;
            this.hDetailInfo = null;
        },
        hLoadcode(){
            this.hisbox = true
            this.hLoadPage(1)
        },
        hLoadPage(pageNo) {
            this.hPageNo = pageNo;
            let params = {};
            params.searchKey = this.docname;
            params.hospitalId = this.hospitalId;
            params.pageNo = this.hPageNo;
            params.pageSize = this.hPageSize;
            this.$axios
                .post(api.getThirdpartyDoctorList, params)
                .then(resp => {
                    this.hCount = resp.data.object.total;
                    this.hList = resp.data.object.records;
                })
                .catch(err => {
                    // this.$Message.info("服务器超时，请重新访问")
                });
        },
        toSaveCode() {
            if (this.mmInfo.hiscode == "" || this.mmInfo.hiscode == null)
                return this.$Message.warning({
                    content: "互联网平台信息院内编码不能为空",
                    duration: 3
                });
            let params = {};
            params.id = this.mId;
            params.hospitalid = this.hospitalId;
            params.hiscode = this.mmInfo.hiscode;
            this.$axios
                .post(api.updateDoctorHisId, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.$Message.success("保存成功");
                        this.closeModal();
                        this.loadPage(1);
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                })
                .catch(err => {
                    // this.$Message.info("服务器超时，请重新访问")
                });
        },
        closeModal() {
            this.modalStatus = false;
        },
        showModal(id, _index) {
            this.mIndex = _index;
            this.$axios
                .post(api.findDoctorHisId, { doctorId: id })
                .then(resp => {
                    if (resp.data.success) {
                        this.mId = id;
                        this.mmInfo = resp.data.object;
                        this.modalStatus = true;
                        this.hospitalId = this.mmInfo.hospitalid
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                })
                .catch(err => {
                    // this.$Message.info("服务器超时，请重新访问")
                });
        },
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
        },
        //加载列表数据
        loadPage(pageNo) {
            this.pageNo = pageNo;
            var params = {};
            params.provinceCode = this.province ? this.province : null;
            params.cityCode = this.city ? this.city : null;
            params.areaCode = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            params.searchKey = this.searchKey.trim();
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            //获取父级科室
            let department = cookie.getCookie("department") || '';
            params.department = department;
            this.$axios
                .post(api.doctorAuthlist, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        this.doctorList = resp.data.object.records;
                        if(this.doctorList){
                            for (let i = 0; i < this.doctorList.length; i++) {
                                this.doctorList[i].iNum = i + 1;
                                this.doctorList[i].sortStatus = false;
                            }
                        } else {
                            this.doctorList = []
                        }
                    } else {
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        closeOther(_index) {
            this.doctorList.map((el, i) => {
                if (i != _index) {
                    let tmp = el;
                    el.sortStatus = false;
                    this.$set(this.doctorList, i, el);
                }
            });
        },
        changeSort(id, val, _index) {
            if(val == undefined){
                let tmpArr = this.doctorList[_index];
                tmpArr.sortStatus = false;
                this.$set(this.doctorList, _index, tmpArr);
                this.$Message.warning({content:'修改失败，数字范围1~999，请三思而后改 ^o^!',duration:5})
                return ;
            }
            let sort = parseInt(val);
            let params = {};
            params.id = parseInt(id);
            params.sort = parseInt(sort);
            this.$axios
                .post(api.doctorupdatedoctorsort, params)
                .then(resp => {
                    if (resp.data.success) {
                        let tmpArr = this.doctorList[_index];
                        tmpArr.sort = sort;
                        tmpArr.sortStatus = false;
                        this.$set(this.doctorList, _index, tmpArr);
                        this.$Message.success('修改成功');
                    }else{
                        this.$Message.error('修改失败');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        changeRemoteClinic(id, iremote, _index) {
            let status, text;
            if (iremote == 1) {
                status = 0;
                text = "关闭";
            } else {
                status = 1;
                text = "开启";
            }
            let params = {};
            params.doctorId = parseInt(id);
            params.iremote = parseInt(status);
            this.$axios
                .post(api.remotedoctorupdateremotestatus, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.$Message.success(text + "成功");
                        this.doctorList[_index].iremote = status;
                    } else this.$Message.info(text + "失败，请重试");
                })
                .catch(err => {
                    console.log(err);
                });
        }
    }
};
</script>
<style lang="less" scoped>
.doctorreviewlist {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .w-select {
        width: 100px;
    }
    .w-select-hos {
        width: 180px;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 10px 0;
    }
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
}
.page{
      text-align: center;
    }
.hisbox{
    width: 100%;
    margin: 15px 0;
}
.main{
    width: 98%;
    display: flex;
    flex-direction: column;
    margin: 10px auto;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    margin-bottom: 20px;
    .title {
        font-size: 20px;
        padding-left: 15px;
        margin-bottom: 20px;
        color: #333;
        height: 40px;
        line-height: 40px;
        background: #ebedf8;
    }
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
    label.ivu-form-item-label {
        padding-right: 0;
    }
    .ivu-modal-content{
        // box-shadow: 0px 0px 5px 5px #7581e7;
    }
    .ivu-modal-footer {
        display: none;
    }
}
</style>
<style lang="less">
.m-row {
    line-height: 32px;
    margin: 10px 15px;
    span:first-child{
        margin-right: 10px;
    }
}
.box{
    width: 90%;
    margin: 0 auto;
}
.m-input {
    width: 220px;
    margin-right: 10px;
}
.ss {
    margin-left: 10px;
}
.slot-tt {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}
.slot-ft {
    text-align: center;
}
.c-tt {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
.m-text {
    font-size: 14px;
    font-weight: bold;
}
.m-btn-l {
    margin-right: 30px;
    margin-top: 20px;
}
.m-btn-r {
    margin-left: 30px;
    margin-top: 20px;
}
.x-back {
    display: inline-block;
    width: 30px;
    height: 30px;
    color: #fff;
    border: 0;
    border-radius: 50%;
    text-align: center;
    background: #5362e1;
    font-weight: normal;
    position: absolute;
    right: 40px;
}
.x-back:hover {
    cursor: pointer;
    background: #5362e1;
}
</style>
